﻿@{
    ViewBag.Title = "Show Cell As DropDown";
}

<h2>Grid : Show Cell As DropDown</h2>

<h3>Sample</h3>

@{
    Html.Telerik().Grid<TelerikMvcClientApi.Models.Product>()
        .Name("MyGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Name);
            columns.Bound(c => c.Category);
            columns.Bound(c => c.SubCategory).Width(400);
            columns.Bound(c => c.Controls).Title("Controls/Features").ClientTemplate("<#= Controls==0?'':Controls #>");
        })
        .ClientEvents(events => events.OnRowDataBound("MyGrid_OnRowDataBound"))
        .DataBinding(dataBinding => dataBinding.Ajax().Select("SelectProducts", "Grid"))
        .Render();
}

<h3>Documentation</h3>
<p>
The Grid implements the OnRowDataBound client event that calls the MyGrid_OnRowDataBound() event handler.
The event handler sets the Category cell to a dropdown using the showCellAsDropDown() function.
The dropdown for the Category cell also verifies that the item selected is not the 'Unselectable' item.  If it is 
then it rolls back the selected item back to the previous selected item by setting cancel=true.
</p>
<p>
Here is the code:
</p>
<pre class="code">
MyGrid_OnRowDataBound=function (e) {
    var grid=$('#WikiPageGrid').data('tGrid');

    grid.showCellAsDropDown({
        row: (e.row.rowIndex-1),
        column: 1,
        width: '150px',
        options: {
            textField: 'Item',
            valueField: 'Id',
            data: categories
        },
        textField: 'Category',
        onChange: function (o) {
            if(typeof console!="undefined") { console.log(o); }
            o.cancel=(o.newText=='Unselectable');
        }
    });
}
</pre>

<script type="text/javascript">
    var categories=[
        { Id: 1,Item: 'Developer Tools' },
        { Id: 2,Item: 'Agile Project Management' },
        { Id: 3,Item: 'Software Testing Tools' },
        { Id: 4,Item: 'Software Testing Tools' },
        { Id: 5,Item: 'Web Content Management' },
        { Id: 6,Item: 'SharePoint' },
        { Id: 7,Item: 'Free Tools' },
        { Id: 8,Item: 'Unselectable' }
    ];

    MyGrid_OnRowDataBound=function (e) {
        var grid=$('#MyGrid').data('tGrid');

        grid.showCellAsDropDown({
            row: (e.row.rowIndex-1),
            column: 1,
            width: '250px',
            options: {
                textField: 'Item',
                valueField: 'Id',
                data: categories
            },
            textField: 'Category',
            onChange: function (o) {
                if(typeof console!="undefined") { console.log(o); }
                o.cancel=(o.newText=='Unselectable');
            }
        });
    }

</script>